<template>
    <div class="container">
        <div class="left" :style="{background:currentThemeColor}">
          <div class="logo">
            <div>家族族谱管理系统</div>
          </div>
          <el-menu
        active-text-color="#ffd04b"
        background-color="#497568"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <Avatar />
            </el-icon>
            <!-- <el-icon><location /></el-icon> -->
            <span>基本信息</span>
          </template>
            <el-sub-menu index="1-1">
            <template #title>
              <el-icon><FolderAdd /></el-icon>
              <span>添加信息</span>
              </template>
              <el-menu-item index="1-1-1"><el-icon><FolderAdd /></el-icon>添加伴侣</el-menu-item>
              <el-menu-item index="1-1-2"><el-icon><FolderAdd /></el-icon>添加父母</el-menu-item>
              <el-menu-item index="1-1-3"><el-icon><FolderAdd /></el-icon>添加子女</el-menu-item>
          </el-sub-menu>
            <el-menu-item index="1-4"><el-icon><Edit /></el-icon>修改信息</el-menu-item>
            <el-menu-item index="1-5"><el-icon><Delete /></el-icon>删除信息</el-menu-item>
            <el-menu-item index="1-6"><el-icon><User /></el-icon>个人信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Download />
            </el-icon>
            <!-- <el-icon><location /></el-icon> -->
            <span>下载</span>
          </template>
            <el-menu-item index="2-1"><el-icon><Finished /></el-icon>下载家谱</el-menu-item>
            <el-menu-item index="2-2"><el-icon><Finished /></el-icon>下载个人信息</el-menu-item>
            </el-sub-menu>
            </el-menu>
      </div>
        <div class="right">
            <div class="top">
              <div class="icon">
                <!-- <el-icon size="20px">
                  <fold />
                </el-icon> -->
              </div>
            <div class="menu">
                <el-menu
                    default-active="1"
                    class="el-menu-demo"
                     mode="horizontal"
                     background-color="#497568"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    >
                <el-menu-item index="1"><el-icon><HomeFilled /></el-icon>首页</el-menu-item>
                <el-menu-item index="2"><el-icon><Search /></el-icon>查询</el-menu-item>
                  <el-sub-menu index="3">
                <template #title><el-icon><Menu /></el-icon>管理</template>
                 <el-menu-item index="4-1"><el-icon><UserFilled /></el-icon>个人中心</el-menu-item>
                <el-menu-item index="4-2"><el-icon><Edit /></el-icon>修改密码</el-menu-item>
                <el-menu-item index="4-3">退出系统</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      </div>
      <div class="bottom">
        <router-view>role</router-view>
      </div>
    </div>
  </div>
</template>
<script>

import { reactive,toRefs,computed} from 'vue';
//导入全局状态管理对象
import{useStore} from 'vuex'
import {Avatar,HomeFilled,Search,Menu,Edit,UserFilled,FolderAdd,Download,Delete,Finished,User} from '@element-plus/icons'
export default {
name:'Layout',
components:{
   Avatar,
   HomeFilled,
   Search,
   Menu,
   Edit,
   UserFilled,
   FolderAdd,
   Download,
   Delete,
   Finished,
   User
},
 

setup() { 
  //返回一个全局状态管理对象
  let $store = useStore()
  let data = reactive({
    isCollapse:false
  })
},
};
</script>
<style lang="scss" scoped>

.container{
    width:100vw;
    height:100vh;
    display: flex;
    .left{
      width:200px;
      background-color: #497568;
        .logo{
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          div{
            color: rgb(255, 255, 255);
            font-size: 19px;
            // border: 1px solid #eee;
            padding: 4px 10px;
            border-radius: 4px;
          }
        }
    }
     .right{
       flex: 1;
        display: flex;
        flex-direction: column;
        .top{
            height: 60px;
            background-color: #497568;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .icon{
              color: white;
              padding-left: 10px;
            }
            .menu{
              width: 500px;
            }
        }
        .bottom{
            flex: 1;
            padding: 6px;
        }
    }

}
</style>